import React from 'react'
import Admin from "../../../layout/Admin";
import {Button, Input, PageHeader, Radio, Select} from "antd";
import AIModel from "../../../model/ai";

class AIKeyword extends React.Component {
    constructor(props) {
        super(props)
        this.model = new AIModel()
        this.state = {
            style: 1,
            key: '',
            keys: [],
        }
    }

    componentDidMount() {
        this.get()
    }

    get = () => {
        const style = this.state.style
        this.model
            .get({style,})
            .then(res => {
                const keys = res.data.ok
                this.setState({
                    keys,
                })
            })
    }

    add = () => {
        const keys = [this.state.key]
        const style = this.state.style
        this.model
            .add({
                keys,
                style,
            })
            .then(res => {
                this.get()
                this.setState({key: '',})
            })
    }

    onSelectChange = (value, option) => {
        console.log(value, option,)
    }

    onDeselect = (value,) => {
        const keys = [value]
        const style = this.state.style
        this.model
            .delete({keys, style,})
            .then(res => {
                console.log(res)
                const ok = res.data.ok
                if (ok === 1) {

                }
            })
            .then(() => {
                this.get()
            })
    }

    onRadioChange = (e) => {
        this.setState({
            style: e.target.value,
        }, () => {
            this.get()
        })
    }

    render() {
        const keys = this.state.keys
        const Option = Select.Option

        const header = <div style={{background: '#fff'}}>
            <PageHeader title='小应预测'/>
        </div>

        const select = <Select
            style={{marginBottom: '8px',}}
            mode='multiple'
            value={this.state.keys}
            // onChange={(value, option) => this.onSelectChange(value, option)}
            onDeselect={this.onDeselect}
        >
            {/*{keys}*/}
            {keys.map((key, i) => {
                return <Option key={i}>{key}</Option>
            })}
        </Select>

        const input = <div style={{width: '500px'}}>
            <Input
                value={this.state.key}
                placeholder='添加近期热门预测关键字'
                onChange={e => this.setState({key: e.target.value,})}
            />
            <Button
                style={{marginTop: '8px',}}
                onClick={this.add}
            >添加</Button>
        </div>

        const radio = <Radio.Group onChange={this.onRadioChange} value={this.state.style}>
            <Radio value={1}>首选</Radio>
            <Radio value={2}>次选</Radio>
        </Radio.Group>

        return <>
            <Admin>
                <div className='list-container'>
                    {header}
                    <div style={{marginBottom: '8px',}}>
                        {radio}
                    </div>
                    {select}
                    {input}
                </div>
            </Admin>
        </>
    }

}

export default AIKeyword
